<ti-button-group id="buttongroup-sup" [items]="items" [(ngModel)]="selected">
  <ng-template #sup let-sup>
    <span *ngIf="sup" [ngClass]="sup.class" class="sup"> <ti-icon *ngIf="sup.iconName" [name]="sup.iconName"></ti-icon>{{sup.text}} </span>
  </ng-template>
</ti-button-group>
<style>
  .sup {
    display: inline-block;
    min-width: 16px;
  }

  .buttongroup-sold-out {
    background-color: #adb0b8;
    border-radius: 2px;
  }

  .buttongroup-discount-icon {
    background-color: #fa9841;
    border-radius: 2px;
  }

  .buttongroup-discount-text {
    padding: 0 4px;
    background-color: #fa9841;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
</style>
